<template>
  <!-- 过敏信息 -->
  <el-row>
    <div class="allergic_item" v-for="(item,index) in itemList" :key="index">
      <el-col :span="6">
        <guoMinShiItem v-model="item.allergens" type="1"></guoMinShiItem>
        <!-- <el-select class="allergens_input" v-model="item.allergens" placeholder="过敏源"  clearable  @change="onChange" @clear="getData" filterable >
           <el-option v-for="(item,index) in allergensList" :key="index" :value="item.allergyName" :label="item.allergyName" ></el-option>
        </el-select> -->
        <!-- <el-input class="allergens_input" v-model="item.allergens" placeholder="过敏源"></el-input> -->
      </el-col>
      <el-col :span="6">
        <!-- <el-select class="allergens_input" v-model="item.allergicReaction" placeholder="过敏反应" clearable  @change="onChange1" @clear="getData" filterable >
           <el-option v-for="(item,index) in reactionList" :key="index" :value="item.allergyName" :label="item.allergyName" ></el-option>
        </el-select> -->
        <guoMinShiItem v-model="item.allergicReaction" type="2"></guoMinShiItem>
        <!-- <el-input class="allergens_input" v-model="item.allergicReaction" placeholder="过敏反应"></el-input> -->
      </el-col>
      <el-col :span="6">
        <!-- <el-select class="allergens_input" v-model="item.allergicDegree" placeholder="过敏程度" clearable  @change="onChange2" @clear="getData" filterable >
           <el-option v-for="(item,index) in degreeList" :key="index" :value="item.allergyName" :label="item.allergyName" ></el-option>
        </el-select> -->
        <guoMinShiItem v-model="item.allergicDegree" type="3"></guoMinShiItem>
        <!-- <el-input class="allergens_input" v-model="item.allergicDegree" placeholder="过敏程度"></el-input> -->
      </el-col>
      <el-col :span="6">
        <el-button @click="optionItem(2,index)" v-if="(itemList.length-1)!==0">
          <i class="el-icon-minus"></i>
        </el-button>
        <el-button @click="optionItem(1,0)" v-if="index==(itemList.length-1)">
          <i class="el-icon-plus"></i>
        </el-button>
      </el-col>
    </div>
  </el-row>
</template>
<script>
export default {
  props: ["value", "patientId", "type", "itemList"],
  data() {
    return {
      degreeList:[],//过敏程度List
      reactionList:[],//过敏反应List
      allergensList:[]//过敏源List
    };
  },
  mounted(){
    this.getBasicData();
  },
  methods: {
    optionItem(type, index) {
      let th = this;
      if (type == 1) {
        th.$emit("addItem");
        // if (type) {
        //   th.itemList.push({
        //     allergyId: "",
        //     patientId: th.patientId,
        //     allergens: "",
        //     allergicReaction: "",
        //     allergicDegree: ""
        //   });
        // }
      } else {
        th.$emit("removeItem", index);
        // if (type) th.itemList.splice(index, 1);
      }
      // th.$emit("input", th.itemList);
    },
    getBasicData(){
      let th=this;
      // 1:过敏源 2：过敏反应 3：过敏程度
      th.$api.pageQueryMedicalStock({pageNum:1,pageSize:1000,type:1}).then(res=>{
          if(res.executed){
            th.allergensList=res.dataBody.list;
          }
      })
      th.$api.pageQueryMedicalStock({pageNum:1,pageSize:1000,type:2}).then(res=>{
          if(res.executed){
            th.reactionList=res.dataBody.list;
          }
      })
      th.$api.pageQueryMedicalStock({pageNum:1,pageSize:1000,type:3}).then(res=>{
          if(res.executed){
            th.degreeList=res.dataBody.list;
          }
      })
    }
  },
  components:{
    guoMinShiItem: () => import("./_com/guoMinShiItem.vue")
  }
};
</script>
<style lang="scss" scoped>
.allergens_input {
  width: 95%;
}
.allergic_item {
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}
</style>

